import React, { useState } from "react";
import { useAppDispatch, useAppSelector } from "../hooks/redux";
import { addTodo, setFilter } from "../store/todoSlice";

export function TodoHeader() {
  const [newTodo, setNewTodo] = useState("");
  const dispatch = useAppDispatch();
  const filter = useAppSelector((state) => state.todos.filter);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newTodo.trim()) {
      dispatch(addTodo(newTodo.trim()));
      setNewTodo("");
    }
  };

  return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="What needs to be done?"
          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="submit"
          className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
        >
          Add
        </button>
      </form>

      <div className="flex gap-2">
        <button
          onClick={() => dispatch(setFilter("all"))}
          className={`px-4 py-2 rounded-lg ${
            filter === "all" ? "bg-blue-500 text-white" : "bg-gray-200"
          }`}
        >
          All
        </button>
        <button
          onClick={() => dispatch(setFilter("done"))}
          className={`px-4 py-2 rounded-lg ${
            filter === "done" ? "bg-blue-500 text-white" : "bg-gray-200"
          }`}
        >
          Done
        </button>
        <button
          onClick={() => dispatch(setFilter("todo"))}
          className={`px-4 py-2 rounded-lg ${
            filter === "todo" ? "bg-blue-500 text-white" : "bg-gray-200"
          }`}
        >
          To-Do
        </button>
      </div>
    </div>
  );
}
